@import "lesshat.less";
@page-base-font-size: 13px;
@page-background-color: #A0A0A0;
@header-background-color: #FFF;
html , body {
	background-color: @page-background-color;
	font-size: @page-base-font-size;
	font-family: tahoma, verdana, arial, helvetica, sans-serif;
}

th, td {
	padding: 1px 3px 1px 3px;
}

a {
	color: #0A0;
	
	&:hover {
		color: #0B0;
	}

	&:active {
		color: #090;
	}
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
.CodeMirror {
  margin-bottom: 3px;
}

input[type="text"] , input[type="password"] , textarea , .CodeMirror {
	background-color: #FEFEFE;
	border: 1px solid #AAA;
	.border-radius (.3em);
	padding: .2em;
	
	&:hover {
		border: 1px solid #888;
	}

	&:focus {
		background-color: #FFF;
		border: 1px solid #666;
		outline: none;
	}

	&[disabled] , &[readonly] {
		background-color: #FAFAFA;
		border-color: #BBB;
		color: #555;
	}
}

button , input[type="submit"] , input[type="reset"] {
	.gradient (~"linear-gradient(top bottom, #DDFB9E 0%, #AED94A 50%, #92CA20 51%, #B5D966 100%)");
	border: 1px solid #B5D966;
	.border-radius (.3em);
	color: #333;
	overflow: visible;
	padding: .3em 1em .3em 1em;
	
	&:hover {
		border-color: #A5C956;
		color: #161616;
	}

	&:focus {
		border-color: #95B946;
		color: #000;
		outline: none;
	}

	&[disabled] {
		.gradient (~"linear-gradient(top bottom, #E2FFA3 0%, #B3DE4F 50%, #97CF25 51%, #BADE6B 100%)");
		border-color: #B5D966;
		color: #8A8;
	}
}

.CodeMirror {
	padding: 0;
}

form {
	dl {
		display: block;
		
		&.error {
			input,
			select,
			textarea {
			  border-color: #C00;
			}
		
			dd {
				&.error {
					color: #C00;
				}
			}
		}
		
		dt {
			padding: 0 0 .2em 0;
			margin: 0;
			label {
				font-weight: bold;
			}
		}

		dd {
			padding: 0;
			margin: 0;
			
			input[type="text"], input[type="password"], textarea, .CodeMirror {
				.box-sizing (border-box);
				display: block;
				width: 100%;
			}

			&.info {
				color: #AAA;
				font-size: .9em;
				font-style: italic;
				padding: .2em 0 0 0;
			}
		}
	}
}

#container {
	width: 100%;

	#header {
		background-color: @header-background-color;
		height: 100px;
		
		#page-logotype {
			background: transparent url('../img/zens-logo-tp.png') no-repeat top left;
			display: block;
			height: 95px;
			margin: 5px 10px 0 10px;
			outline: none;
			overflow: hidden;
			text-indent: -9999px;
			white-space: nowrap;
			width: 250px;
		}
		
		#user-info {
			margin: 10px;
		}
	}
	
	#content {
		#content-header {
			.gradient (~"linear-gradient(top bottom, #CDEB8E 0%, #A5C956 100%)");
			border-bottom: 1 px solid #95B946;
			border-top: 1px solid #BDDB7E;
			height: 25px;
			padding: .2em;
			
			a {
				color: #050;
				text-decoration: none;
			}
		}
		
		#content-main-wrapper {
			position: relative;
			
			#panel-left {
				background-color: #A5C956;
				border-bottom: 1px solid #95B946;
				border-right: 1px solid #95B946;
				.border-radius (0 0 .5em 0);
				left: 0;
				position: absolute;
				top: 0;
				width: 120px;
			
				#navigation-left {
					ul {
						list-style: none;
						margin: 10px auto;
						padding: 0;
						width: 100%;
						
						li {
							.border-radius (.5em);
							height: 100px;
							margin: 5px auto;
							padding: 2px;
							width: 100px;
						
							a {
								.gradient (~"linear-gradient(top bottom, #CDEB8E 0%, #A5C956 100%)");
								border: 1 px solid #696;
								.border-radius (.5em);
								.box-shadow (0 , 1px , 1px , 1px , #95B946);
								color: #000;
								display: block;
								height: 100px;
								line-height: 100px;
								text-align: center;
								text-decoration: none;
								
								&:hover {
									.gradient (~"linear-gradient(top bottom, #CFED90 0%, #A7CB58 100%)");
									border-color: #474;
									.box-shadow (0 , 1px , 1px , 1px , #85A936);
								}
							}
						}
					}
				}
			}
			
			#main {
				height: 100%;
				padding: 3px 3px 3px 124px;
			
				#main-content {
					background-color: #FDFDFD;
					border: 1px solid #999;
					.border-radius (.2em);
					height: 100%;
					padding: .5em;
					
					.resource-form {
						.input-description {
							height: 100px;
						}
					}
					
					.resource-form-2-column {
						margin-bottom: 1em;
						
						.column {
							float: left;
							margin: 0 1% 1em 0;
							width: 49%;
						}
						.column-wide {
							clear: both;
							margin: 0 1% 1em 0;
							width: 99%;
						}
					}
										
				}
			}
			
			#panel-right {
				background-color: #A5C956;
				border-bottom: 1px solid #95B946;
				border-left: 1px solid #95B946;
				.border-radius (0 0 0 .5em);
				position: absolute;
				right: 0;
				top: 0;
				width: 120px;
			}
		}
	}
	
	#footer {
		border-top: 1px solid #888;
		bottom: 0;
		clear: both;
		color: #888;
		position: static;
		text-align: center;
		width: 100%;
	}
}

.clear {
	clear: both;
}

.clear-left {
	clear: left;
}

.clear-right {
	clear: right;
}

.hide {
	display: none !important;
}
